<template>
  <div class="index">
    <p class="title">
      <template v-if="!id">
        <span>用户组织：{{$store.state.user.organizationname}}</span>
        <span>组织负责人：{{$store.state.user.headOfUnit}}</span>
        <span>电话：{{$store.state.user.phone}}</span>
      </template>
      <template v-else>
        <span>学校：{{schoolname}}</span>
      </template>
    </p>
    <ul class="screen">
      <li>
        <div>
          <p>风险等级</p>
          <b>{{statistics.risklevel}}</b>
        </div>
      </li>
      <li>
        <div>
          <p>体温异常 </p>
          <b>{{statistics.temperature}}</b>
        </div>
      </li>
      <li>
        <div>
          <p>确认病例 </p>
          <b>{{statistics.confirmrisk}}</b>
        </div>
      </li>
      <li>
        <div>
          <p>核酸检测 </p>
          <b>{{statistics.testper}}</b>
        </div>
      </li>
    </ul>
    <div class="person comtab">
      <span class="gap">人员</span>
      <ul>
        <li @click="changePerson(v)" :class="{ picked: v.code === statistics.person }" v-for="v in personList" :key='v.code'>
          <button type="button">{{v.name}}
          </button>
        </li>
      </ul>
    </div>
    <div class="situation">
      <span>测温统计</span>
      <ul>
        <li v-for="v in statistics.temList" :key="v.id" @click="$router.push(`/monitoring?statisticstype=${v.statisticstype}&istoday=${v.istoday}`)">
          <b>{{v.count}}</b>
          <p><i :class="v.risklevel == 'g' ? 'col1' : v.risklevel == 'y' ? 'col2' : v.risklevel == 'b' ? 'col3' : v.risklevel == 'o' ? 'col4' : v.risklevel == 'r' ? 'col5' : '' "></i>{{v.text}}
          </p>
        </li>
      </ul>
    </div>
    <div class="situation">
      <span>隔离统计</span>
      <ul>
        <li v-for="v in statistics.gapList" :key="v.id" @click="$router.push(`/monitoring?statisticstype=${v.statisticstype}&istoday=${v.istoday}`)">
          <b>{{v.count}}</b>
          <p><i :class="v.risklevel == 'g' ? 'col1' : v.risklevel == 'y' ? 'col2' : v.risklevel == 'b' ? 'col3' : v.risklevel == 'o' ? 'col4' : v.risklevel == 'r' ? 'col5' : '' "></i>{{v.text}}
          </p>
        </li>
      </ul>
    </div>
    <div class="situation">
      <span class="spespan">确诊和其他统计</span>
      <ul>
        <li v-for="v in statistics.confirmList" :key="v.id" @click="$router.push(`/monitoring?statisticstype=${v.statisticstype}&istoday=${v.istoday}`)">
          <b>{{v.count}}</b>
          <p><i :class="v.risklevel == 'g' ? 'col1' : v.risklevel == 'y' ? 'col2' : v.risklevel == 'b' ? 'col3' : v.risklevel == 'o' ? 'col4' : v.risklevel == 'r' ? 'col5' : '' "></i>{{v.text}}
          </p>
        </li>
      </ul>
    </div>
    <div class="trend">
      <h2>趋势分析</h2>
      <div class="timebox">
        <ul>
          <li>时间</li>
          <li @click='changeTime(v)' :class="{ actived: v.code === trend.isDate }" v-for="v in timeList" :key='v.code'>
            <button type="button">{{v.name}}</button>
          </li>
        </ul>
        <i class="el-input__icon el-icon-date timeicon"></i>
        <el-date-picker class="picktime" v-model="trend.trendTime" type="daterange" @change="picktrendate" format="yyyy-MM-dd"
          value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
      </div>
      <ul class="statistics">
        <li>统计项</li>
        <li @click='changeStatisticstype(v)' :class="{ picks: trend.statisticstype === v.code }" v-for="v in statisticstypeList" :key='v.code'>
          <button type="button">{{v.name}}</button>
        </li>
      </ul>
    </div>
    <div class="region" style="margin-top: 20px;">
      <div v-show="singlex.length && singley.length" id="singleChart" :style="{width: '1100px', height: '340px', backgroundColor:'#000418', float: 'left'}"></div>
      <div v-show="singlex.length === 0 && singley.length === 0" class="emptybox">无数据</div>
    </div>

    <div id="schoolbox">
      <ul>
        <li @click="changeSchoolTab(0)" :class="{ schoolpicked: school.tab === 0 }">班级概况</li>
        <li @click="changeSchoolTab(1)" :class="{ schoolpicked: school.tab === 1 }">职工概况</li>
        <li @click="changeSchoolTab(2)" :class="{ schoolpicked: school.tab === 2 }">访客概况</li>
        <li class="addvistor">
          <p @click="addVistor">添加访客</p>
        </li>
      </ul>
      <!-- 班级的搜索 -->
      <template v-if="school.tab === 0">
        <div class="menu fr ac">
          <span>班级</span>
          <el-input class="inp" v-model="school.class.classname"/>
          <span class="studysta">学情</span>
          <el-select class="haveclasssta" v-model="school.class.study" placeholder="请选择">
            <el-option label="正常" value="1"/>
            <el-option label="停课" value="2"/>
          </el-select>
          <el-button type="primary" class="search" @click="getClass"><i class="el-icon-search"></i> 搜索</el-button>
          <a class="exports" :href="'http://wcxt.bjyulinkeji.com/health/getClassInfo/dataexport?ranklevel=4&schoolno=' + schoolno">导出</a>
        </div>
        <div class="cabin">
          <table>
            <thead>
            <tr>
              <th>班级</th>
              <th>学情</th>
              <th>测温</th>
              <th>体温异常</th>
              <th>居家隔离人数</th>
              <th>医疗隔离</th>
              <th>返校隔离</th>
              <th>预警</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="v in school.class.list" :key='v.classno'>
              <td>{{ v.classname }}</td>
              <td>{{ v.study }}</td>
              <td>{{ v.wence }}</td>
              <td>{{ v.tiwenyichang }}</td>
              <td>{{ v.jujia }}</td>
              <td>{{ v.yiliao }}</td>
              <td>{{ v.fanxiao }}</td>
              <td>{{ v.yujing }}</td>
              <td class="detail" @click="todetailsclass(v)">详情 ></td>
            </tr>
            <tr v-if="!school.class.list.length">
              <td colspan="11" style="text-align: center;border-right: none;">无数据</td>
            </tr>
            </tbody>
          </table>
        </div>
        <!--<el-pagination v-show='schooltabflag == 0' :current-page.sync="pagecurrent1" @current-change="handleSizeChange1" -->
                       <!--background layout="prev, pager, next" :total="pagetotal1"></el-pagination>-->
      </template>
      <!-- 职工的搜索 -->
      <template v-if="school.tab === 1">
        <div class="menu fr ac">
          <span>姓名</span>
          <el-input class="inp" v-model="school.worker.studentname"/>
          <span class="studysta">状态</span>
          <el-select class="haveclasssta" v-model="school.worker.statisticstype" placeholder="请选择">
            <el-option label="正常" value="0"/>
            <el-option label="留校观察" value="2"/>
            <el-option label="医疗交接" value="17"/>
            <el-option label="居家隔离" value="7"/>
            <el-option label="医疗隔离" value="5"/>
            <el-option label="复工申请" value="18"/>
            <el-option label="返校复课" value="11"/>
            <el-option label="返校复工" value="6"/>
            <el-option label="疑似患者" value="14"/>
          </el-select>
          <el-button type="primary" class="search" @click="getWorker"><i class="el-icon-search"></i> 搜索</el-button>
          <a class="exports" :href="'http://wcxt.bjyulinkeji.com/personnel/dataexport?userid=' + $store.state.user.userid + '&userType=2'">导出</a>
        </div>
        <div class="cabin">
          <table>
            <thead>
            <tr>
              <th>职工ID</th>
              <th>姓名</th>
              <th>部门</th>
              <th>联系方式</th>
              <th>最新测温</th>
              <th>测温时间</th>
              <th>地点</th>
              <th>当前状态</th>
              <th>详情</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="v in school.worker.list" :key="v.personId">
              <td><i class="'t1"></i>{{ v.personId }}</td>
              <td>{{ v.name }}</td>
              <td>{{ v.department }}</td>
              <td>{{ v.phone }}</td>
              <td>{{ v.tp }}</td>
              <td>{{ v.createtime }}</td>
              <td>{{ v.address }}</td>
              <td>{{ v.healthstatus }}</td>
              <!-- <td>{{ v.nucleic }}</td> -->
              <td class="detail" @click="todetails(v)">详情 ></td>
            </tr>
            <tr v-if="!school.worker.list.length">
              <td colspan="9" style="text-align: center;border-right: none;">无数据</td>
            </tr>
            </tbody>
          </table>
        </div>
        <!--<el-pagination :current-page.sync="school.worker.pagecurrent" @current-change="getWorker"-->
                       <!--background layout="prev, pager, next" :total="pagetotal3"></el-pagination>-->
      </template>
      <!-- 访客的搜索 -->
      <template v-if="school.tab === 2">
        <div class="menu fr ac">
          <span>姓名</span>
          <el-input class="inp" v-model="school.visitor.studentname"/>
          <span class="studysta">状态</span>
          <el-select class="haveclasssta" v-model="school.visitor.personstate" placeholder="请选择">
            <el-option label="允许入校" value="1"/>
            <el-option label="禁止入校" value="2"/>
          </el-select>
          <el-button type="primary" class="search" @click="getvistor"><i class="el-icon-search"></i> 搜索</el-button>
          <a class="exports" :href="'http://wcxt.bjyulinkeji.com/personnel/dataexport?userid=' + $store.state.user.userid + '&userType=3'">导出</a>
        </div>
        <div class="cabin">
          <table>
            <thead>
            <tr>
              <th>访客ID</th>
              <th>名字</th>
              <th>联系方式</th>
              <th>最新温测</th>
              <th>温测时间</th>
              <th>地点</th>
              <th>当前状态</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="v in school.visitor.list" :key='v.personId'>
              <td><i class="'t1"></i>{{ v.personId }}</td>
              <td>{{ v.name }}</td>
              <td>{{ v.phone }}</td>
              <td>{{ v.tp }}</td>
              <td>{{ v.createtime }}</td>
              <td>{{ v.address }}</td>
              <td>{{ v.healthstatus }}</td>
              <td class="detail" @click="todetails(v)">详情 ></td>
            </tr>
            <tr v-if="!school.visitor.list.length">
              <td colspan="8" style="text-align: center;border-right: none;">无数据</td>
            </tr>
            </tbody>
          </table>
        </div>
        <!--<el-pagination :current-page.sync="pagecurrent4" @current-change="handleSizeChange4"-->
                       <!--background layout="prev, pager, next" :total="pagetotal4"></el-pagination>-->
      </template>

      <h3 class="vicetit">卡点信息</h3>
      <div class="menu fr ac">
        <span>卡点名称</span>
        <el-input class="inp" v-model="stuck.stuckname"/>
        <el-button type="primary" class="search" @click="getStuck"><i class="el-icon-search"></i> 搜索</el-button>
        <a class="exports" :href="'http://wcxt.bjyulinkeji.com/stuck/batchexport? schoolname=' + schoolname">导出</a>
      </div>
      <div class="cabin">
        <table>
          <thead>
            <tr>
              <th>卡点ID</th>
              <th>卡点名称</th>
              <th>卡点位置</th>
              <th>人员配置</th>
              <th>负责人</th>
              <th>联系电话</th>
              <th>设备配置</th>
              <th>检测人数</th>
              <th>体温异常</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="v in stuck.list" :key='v.stuckid'>
              <td>{{ v.stuckid }}</td>
              <td>{{ v.stuckname }}</td>
              <td>{{ v.stuckposition }}</td>
              <td>{{ v.staffing }}</td>
              <td>{{ v.contact }}</td>
              <td>{{ v.phone }}</td>
              <td><span v-for="(item, index) in v.deployList" :key="index">{{`${index ? '，' : ''}${item.name}x${item.num}`}}</span></td>
              <td>{{ v.jiance }}</td>
              <td>{{ v.tiwenyichang }}</td>
              <td class="detail" @click="todetailscard(v)">详情 ></td>
            </tr>
          </tbody>
        </table>
        <p v-if="!stuck.list.length" class="emptydata">无数据</p>
      </div>
      <el-pagination :current-page.sync="stuck.pagecurrent" @current-change="getStuck"
        background layout="prev, pager, next" :total="stuck.total"></el-pagination>

      <h3 class="vicetit">消杀信息</h3>
      <div class="menu fr ac">
        <span>场所名称</span>
        <el-input class="inp" v-model="place.organizaitonname" placeholder=""></el-input>
        <el-button type="primary" class="search" @click="getPlace"><i class="el-icon-search"></i> 搜索</el-button>
        <a class="exports" :href="'http://wcxt.bjyulinkeji.com/disinfect/batchexport?schoolno=' + schoolno">导出</a>
      </div>
      <div class="cabin">
        <table>
          <thead>
            <tr>
              <th>场所ID</th>
              <th>场所名称</th>
              <th>场所位置</th>
              <th>最新消杀时间</th>
              <th>负责人联系人</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="v in place.list" :key='v.id'>
              <td>{{ v.placeid }}</td>
              <td>{{ v.placename }}</td>
              <td>{{ v.placeseat }}</td>
              <td>{{ v.createtime }}</td>
              <td>{{ v.contact }}</td>
              <td class="detail" @click="todetailsdisinfect(v)">详情 ></td>
            </tr>
          </tbody>
        </table>
        <p v-if="!place.list.length" class="emptydata">无数据</p>
      </div>
      <el-pagination :current-page.sync="place.pagecurrent" @current-change="getPlace"
        background layout="prev, pager, next" :total="place.total"></el-pagination>
    </div>
  </div>
</template>

<script>
  import moment from '@/utils/moment'

  export default {
    name: 'page-school',
    props: ['id'],
    data () {
      return {
        paramsSchool: {
          current: 1,
          total: 0,
          schoolname: '',
          risklevel: ''
        },
        risklevelList: [
          { text: '绿', value: 'g' },
          { text: '黄', value: 'y' },
          { text: '蓝', value: 'b' },
          { text: '橙', value: 'o' },
          { text: '红', value: 'r' }
        ],
        personList: [
          { name: '全部', code: '' },
          { name: '学生', code: '1' },
          { name: '职工学', code: '2' },
          { name: '访客', code: '3' }
        ],
        timeList: [
          { name: '今天', code: '1' },
          { name: '7天', code: '7' },
          { name: '14天', code: '14' },
          { name: '30天', code: '30' }
        ],
        statisticstypeList: [
          { name: '测温', code: '1' },
          { name: '体温异常', code: '2' },
          { name: '停课班级', code: '8' },
          { name: '留校观察', code: '3' },
          { name: '居家隔离', code: '7' },
          { name: '医疗隔离', code: '5' },
          { name: '返校复课', code: '11' }
        ],
        options2: [
          { value: '0', label: '正常' },
          { value: '2', label: '留校观察' },
          { value: '17', label: '医疗交接' },
          { value: '7', label: '居家隔离' },
          { value: '5', label: '医疗隔离' },
          { value: '18', label: '复工申请' },
          { value: '11', label: '返校复课' },
          { value: '6', label: '返校复工' },
          { value: '14', label: '疑似患者' }
        ],
        statistics: {
          person: '',
          risklevel: '',
          temperature: '',
          confirmrisk: '',
          testper: '',
          temList: [],
          gapList: [],
          confirmList: []
        },
        trend: {
          isToday: '1',
          trendTime: [],
          isDate: '1',
          statisticstype: '1'
        },
        singlex: [],
        singley: [],
        school: {
          tab: 0,
          class: {
            classname: '',
            study: '',
            list: []
          },
          worker: {
            statisticstype: '',
            studentname: '',
            pagecurrent: 1,
            list: []
          },
          visitor: {
            personstate: '',
            studentname: '',
            pagecurrent: 1,
            list: []
          }
        },
        stuck: {
          pagecurrent: 1,
          total: 0,
          stuckname: '',
          list: []
        },
        place: {
          organizaitonname: '',
          pagecurrent: 1,
          total: 0,
          list: []
        }
      }
    },
    computed: {
      schoolno () {
        return this.id || this.$store.state.classinfo.schoolno
      },
      schoolname () {
        return this.$route.query.schoolname || this.$store.state.classinfo.schoolname
      },
      detail () {
        return {}
      }
    },
    filters: {
      sexfilter(v) {
        var sta = '';
        if (v == 0) {
          sta = '女'
        } else {
          sta = '男'
        }
        return sta
      }
    },
    created() {
      this.getStatistics()
      this.getClass()
      this.getStuck()
      this.getPlace()
    },
    mounted() {
      this.getTrends()
    },
    methods: {
      getStatistics () {
        this.$http('/health/healthInfoStatistics/getStatistics', {
          countyno: '',
          ranklevel: '4',
          provinceno: '',
          schoolno: this.schoolno,
          cityno: '',
          istoday: '',
          statisticstype: '',
          schoolLevel: '',
          personType: this.statistics.person
        }).then(
          res => {
            if (res.code == 200) {
              const { data } = res

              // 四大块
              this.statistics.risklevel = res.data[0].risklevel
              data.forEach(v => {
                if (v.text === '测温异常人数') this.statistics.temperature = v.count
                if (v.text === '今日确诊') this.statistics.confirmrisk = v.count
                if (v.text === '日核酸检测') this.statistics.testper = v.count
              })

              this.statistics.temList = ['日测温', '日测温异常', '日疑似人数', '日康复人数'].map(name => {
                return data.find(v => v.text === name) || {}
              })
              this.statistics.gapList = ['日医疗隔离', '日居家隔离', '医疗隔离', '居家隔离'].map(name => {
                return data.find(v => v.text === name) || {}
              })
              this.statistics.confirmList = ['今日确诊', '日核酸检测', '确诊人数', '日消杀次数'].map(name => {
                return data.find(v => v.text === name) || {}
              })
            }
          }
        )
      },
      changePerson (v) {
        this.statistics.person = v.code
        this.getStatistics()
      },
      getTrends() {
        const form = {
          isdate: this.trend.isDate,
          provinceno: '',
          schoolno: this.schoolno,
          cityno: '',
          istoday: this.trend.isToday,
          statisticstype: this.trend.statisticstype,
          classno: '',
          begintime: this.trend.trendTime[0] || '',
          endtime: this.trend.trendTime[1] || ''
        }
        this.$http('/health/healthInfoStatistics/getTrends', form).then(
          res => {
            if (res.code == 200) {
              this.singlex = []
              this.singley = []
              res.data.forEach(v => {
                this.singlex.unshift(v.unitime);
                this.singley.unshift({ value: v.count, data: v })
              })
              this.drawLine()
            }
          }
        )
      },
      drawLine () {
        let that = this;
        let myChart = this.$echarts.init(document.getElementById('singleChart'))
        myChart.setOption({
          title: {
            text: ''
          },

          tooltip: {
            trigger: 'axis', //标签
            color: 'red',
            axisPointer: {
              crossStyle: {
                backgroundColor: 'red'
              }
            },
            formatter: function(params) {
              console.log(params);
              that.trendlist.n1 = params[0].data;
              // 可有自定义表格、html样式等；
              var str = '测温人数：' + that.trendlist.n1 + '<br/>' + '测温异常人数：' + that.trendlist.n2 + '<br/>' + '疑似人数：' +
                that.trendlist.n3 +
                '<br/>' + '确诊人数：' + that.trendlist.n4 + '<br/>' + '居家隔离：' + that.trendlist.n5 + '<br/>' + '医疗隔离：' +
                that.trendlist.n6 + '<br/>' + '康复人数：' + that.trendlist.n7;
              return str;
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: that.singlex , //['0点', '6点', '12点', '18点', '24点'],
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            },
          }],
          yAxis: [{
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            },
            //设置网格线颜色
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#333'],
                width: 1,
                type: 'solid'
              }
            }
          }],
          series: [{
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            itemStyle: {
              normal: {
                areaStyle: {
                  type: 'default',
                  color: '#090f42',
                },
                lineStyle: { //线的颜色
                  color: '#2c39ec'
                },
                //以及在折线图每个日期点顶端显示数字
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#fff'
                  }
                }
              },
            },
            data: that.singley, // [23, 32, 101, 134, 90]
          }]
        })
      },
      changeTime (v) {
        if (v.code == 1) {
          this.trend.isToday = '1'
        } else {
          this.trend.isToday = '0'
        }
        this.trend.trendTime = []
        this.trend.isDate = v.code
        this.getTrends()
      },
      picktrendate() {
        const begin = this.trend.trendTime[0] || ''
        const end = this.trend.trendTime[1] || ''
        const date = moment().format('yyyy-MM-dd')

        if (begin === date && end === date) this.trend.isToday = '1'
        else this.trend.isToday = '0'

        if (begin && end) this.trend.isDate = '0'
        else this.trend.isDate = '1'
        this.getTrends()
      },
      changeStatisticstype (v) {
        this.trend.statisticstype = v.code
        this.getTrends()
      },
      changeSchoolTab (tab) {
        this.school.tab = tab
        if (tab === 0) {
          this.school.class.list = []
          this.getClass()
        }
        if (tab === 1) { // 职工
          this.school.worker.list = []
          this.getWorker()
        }
        if (tab === 2) { // 访客
          this.school.visitor.list = []
          this.getvistor()
        }
      },
      // 获取班级
      getClass () {
        const { school } = this
        return this.$http('/health/healthInfoStatistics/getClassInfos', {
          classname: school.class.classname,
          study: school.class.study,
          ranklevel: '4',
          cityno: '',
          classno: '',
          schoolno: this.schoolno
        }).then(res => {
          if (res.code == 200) {
            this.school.class.list = res.data
          }
        })
      },
      // 职工概况
      getWorker() {
        const { worker } = this.school
        return this.$http('/health/healthInfoStatistics/getPersonHealths', {
          ranklevel: '4',
          schoolno: this.schoolno, // this.schoolno,
          personType: '2',
          statisticstype: worker.statisticstype,
          studentname: worker.studentname,
          pagecurrent: worker.pagecurrent,
          pagesize: 10
        }).then(res => {
          if (res.code == 200) {
            this.school.worker.list = res.data
          }
        })
      },
      // 访客概况
      getvistor() {
        const { visitor } = this.school
        return this.$http('/health/healthInfoStatistics/getPersonHealths', {
          studentname: visitor.studentname,
          personType: '3',
          personstate: visitor.personstate,
          ranklevel: '4',
          pagesize: 10,
          pagecurrent: visitor.pagecurrent,
          schoolno: this.schoolno
        }).then(res => {
          if (res.code == 200) {
            this.school.visitor.list = res.data
          }
        })
      },
      addVistor () {
        this.$router.push({
          path: '/monitorDetails',
          query: {
            type: 3,
            personId: ''
          }
        })
      },
      // 卡点信息
      getStuck () {
        const { stuck } = this
        this.$http('/stuck/fuzzyquery/page', {
          pagesize: 5,
          pagecurrent: stuck.pagecurrent,
          stuckname: stuck.stuckname // #卡点名称
        }).then(res => {
          if (res.code == 200) {
            res.data.stuck.records.forEach(v => {
              v.deployList = v.deploy ? JSON.parse(v.deploy) : []
            })
            stuck.list = res.data.stuck.records
            stuck.total = res.data.stuck.total
          }
        })
      },
      // 消杀信息
      getPlace () {
        const { place } = this
        this.$http('/disinfect/getmanage', {
          organizaitonname: place.organizaitonname,
          pagecurrent: place.pagecurrent,
          pagesize: 5
        }).then(res => {
          if (res.code == 200) {
            place.list = res.data.tplace.records
            place.total = res.data.tplace.total
          }
        })
      },
      todetailsclass (v) {
        this.$router.push(`/class/${v.classno}`)
      },
      todetailsdisinfect (v) {
        const item = JSON.stringify(v)
        this.$router.push({
          path: '/disindectdetail',
          query: {
            text: item
          }
        })
      },
      todetailscard (v) {
        const item = JSON.stringify(v)
        this.$router.push({
          path: '/cardDetail',
          query: {
            text: item
          }
        })
      },
      todetails (v) {
        this.$router.push({
          path: '/monitorDetails',
          query: {
            type: this.school.tab + 1,
            personId: v.personId
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .emptybox{
    width: 1100px;
    height: 340px;
    background-color:#000418;
    text-align: center;
    font-size: 24px;
    color: #0facf8;
    padding: 160px 0 0;
    box-sizing: border-box;
  }
  .exlist {
    display: inline-block;
    float: right;
    font-size: 14px;
    color: #0e8fc1;
    font-weight: normal;
    cursor: pointer;

    &:hover {
      color: white;
    }
  }

  .exportcom {
    display: inline-block;
    float: right;
    font-size: 14px;
    color: #2eb9f4;
    line-height: 30px;
    margin-left: 60px;
    cursor: pointer;

    &:hover {
      color: white;
    }
  }

  /deep/ .el-pagination {
    margin: 30px 0;
  }

  /deep/ .el-pagination.is-background .btn-next,
  /deep/ .el-pagination.is-background .btn-prev,
  /deep/ .el-pagination.is-background .el-pager li {
    background-color: #090f42;
    color: #fff;
    border: 1px solid #1a2497;
  }

  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #1520be;
    border-color: #1520be;
  }

  .addvistor {
    float: right;

    a {
      color: #252fc7;

      &:hover {
        color: white;
      }
    }
  }

  .hide {
    display: none !important;
  }

  .emptydata {
    font-size: 14px;
    color: white;
    text-align: center;
    line-height: 44px;
  }

  .index {
    #leftChartempty {
      font-size: 24px;
      color: #37c3f8;
      text-align: center;
      line-height: 340px;
    }

    .title {
      font-size: 14px;
      color: white;

      span {
        margin-right: 30px;
      }
    }

    // 四个大屏
    .screen {
      width: 100%;
      display: flex;
      margin: 30px 0;
      justify-content: space-between;

      li {
        display: inline-block;
        width: 256px;
        height: 192px;
        background-color: white;

        div {
          padding-left: 70px;
          margin-top: 20px;
          padding-right: 35px;

          p {
            font-size: 14px;
            color: #fff;
            line-height: 30px;

            span {
              float: right;
              font-size: 12px;

              &.tems {
                color: #2ba301;
              }

              &.risks {
                color: #ff1812;
              }
            }
          }

          b {
            font-size: 24px;
            color: #fff;
          }
        }

        &:nth-child(1) {
          background-color: #000418;
          background-image: url(../../assets/images/t1.png);
          background-repeat: no-repeat;
          background-position: 50% 72px;
          background-size: 346px;

          div {
            background: url(../../assets/images/risk.png) no-repeat 20px center;
            background-size: 30px;
          }
        }

        &:nth-child(2) {
          background-color: #000418;
          background-image: url(../../assets/images/t2.png);
          background-repeat: no-repeat;
          background-position: 50% 72px;
          background-size: 346px;

          div {
            background: url(../../assets/images/temperature.png) no-repeat 20px center;
            background-size: 30px;
          }
        }

        &:nth-child(3) {
          background-color: #000418;
          background-image: url(../../assets/images/t3.png);
          background-repeat: no-repeat;
          background-position: 50% 26px;
          background-size: 346px;

          div {
            background: url(../../assets/images/case.png) no-repeat 20px center;
            background-size: 30px;
          }
        }

        &:nth-child(4) {
          background-color: #000418;
          background-image: url(../../assets/images/t4.png);
          background-repeat: no-repeat;
          background-position: 50% 80px;
          background-size: 350px;

          div {
            background: url(../../assets/images/test.png) no-repeat 20px center;
            background-size: 30px;
          }
        }
      }
    }

    // 地区 tab
    .comtab {
      overflow: hidden;
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;

      span {
        width: 110px;
        font-size: 14px;
        color: white;
        line-height: 36px;

        &.gap {
          letter-spacing: 1em;
        }
      }

      ul {
        width: 100%;

        li {
          display: inline-block;
          margin-right: 25px;

          &.picked {
            button {
              color: #00c8f1;
            }
          }

          button {
            cursor: pointer;
            border: none;
            background: transparent;
            font-size: 14px;
            color: white;
            line-height: 36px;

            &:focus {
              outline: none;
            }

            &:hover {
              color: #00c8f1;
            }
          }
        }
      }
    }

    // 地区 tab 对应的数据
    .situation {
      display: flex;
      justify-content: space-between;
      background-color: #000418;
      padding: 20px;
      box-sizing: border-box;
      margin-bottom: 15px;

      span {
        width: 16px;
        font-size: 14px;
        color: white;
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
        border: 1px solid #192b7c;
        background-color: #0b1233;
        border-radius: 4px;
        padding: 16px 8px;
        text-align: center;
        letter-spacing: 4px;

        &.spespan {
          font-size: 12px;
          padding: 6px 8px;
        }
      }

      ul {
        justify-content: space-between;
        width: 94%;
        display: flex;

        li {
          width: 226px;
          height: 128px;
          border-left: 1px solid #454b66;
          border-right: 1px solid #454b66;
          border-top: 1px solid #101944;
          border-bottom: 1px solid #101944;
          border-radius: 6px;

          &:hover {
            border: 1px solid white;
            cursor: pointer;

            b {
              color: #3440de;
            }

            p {
              color: #5862e4;

              i {
                background-color: #444ecf !important;
              }
            }
          }

          b {
            display: block;
            font-size: 30px;
            color: white;
            text-align: center;
            line-height: 80px;
            background-color: #000418;
            border-radius: 6px;
          }

          p {
            background-color: #0b1026;
            font-size: 14px;
            color: white;
            text-align: center;
            line-height: 46px;
            border-top: 1px solid #101944;
            border-radius: 6px;

            i {
              display: inline-block;
              width: 8px;
              height: 8px;
              border-radius: 50%;
              margin-right: 8px;
            }

            .col1 {
              background-color: green;
            }

            .col2 {
              background-color: yellow;
            }

            .col3 {
              background-color: blue;
            }

            .col4 {
              background-color: orange;
            }

            .col5 {
              background-color: red;
            }
          }
        }
      }
    }

    //趋势分析
    .trend {
      h2 {
        font-size: 18px;
        color: white;
        margin: 40px 0 30px 0;
      }

      .timebox {
        overflow: hidden;
        width: 100%;
        margin: 12px 0;

        ul {
          display: inline-block;
          float: left;

          li {
            display: inline-block;
            float: left;
            font-size: 14px;
            color: white;
            margin-right: 32px;
            line-height: 24px;

            &:first-child {
              width: 60px;
            }

            &.actived {
              button {
                color: #00c8f1;
              }
            }

            button {
              font-size: 14px;
              color: white;
              border: none;
              background-color: transparent;
              cursor: pointer;

              &:focus {
                outline: none;
              }

              &:hover {
                color: #00c8f1;
              }
            }
          }
        }

        .timeicon {
          float: right;
          font-size: 18px;
          width: 32px;
          height: 28px;
          line-height: 30px;
          border: 1px solid white;
          border-radius: 0 4px 4px 0;
          color: white;
        }

        .picktime {
          float: right;
          background-color: transparent;
          border-radius: 4px 0 0 4px;
          width: 280px;
          line-height: 30px;
          height: 30px;
          font-size: 12px;
          color: white;

          /deep/ .el-range-separator {
            line-height: 24px;
            color: white;
          }

          /deep/ .el-icon-date {
            display: none;
          }

          /deep/ .el-input__icon {
            line-height: 30px;
            height: 30px;
            color: white;
          }

          /deep/ .el-range-input {
            background-color: transparent;
            line-height: 30px;
            height: 30px;
            color: white;
          }

          /deep/ .el-input__inner {
            height: 30px !important;
            line-height: 30px !important;
            padding-left: 10px;
            background: transparent;
            color: white;
            font-size: 12px;
            border-radius: 4px 0 0 4px;
          }

          /deep/ .el-input__prefix {
            display: none;
          }

          /deep/ .el-input__icon {
            line-height: 30px;
          }
        }
      }

      .statistics {
        overflow: hidden;
        width: 100%;
        margin-bottom: 40px;

        li {
          display: inline-block;
          float: left;
          font-size: 14px;
          color: white;
          margin-right: 32px;
          line-height: 24px;

          &:first-child {
            width: 60px;
          }

          &.picks {
            button {
              color: #00c8f1;
            }
          }

          button {
            font-size: 14px;
            color: white;
            border: none;
            background-color: transparent;
            cursor: pointer;

            &:focus {
              outline: none;
            }

            &:hover {
              color: #00c8f1;
            }
          }
        }
      }
    }

    // 趋势图
    .region {
      overflow: hidden;
      position: relative;
      width: 100%;

      .detail {
        cursor: pointer;
        position: absolute;
        right: 20px;
        bottom: 30px;
        color: #4353da;
        font-size: 14px;

        &:hover {
          color: white;
        }
      }
    }

    // 当前省份
    .curentcity {
      margin-top: 20px;

      h2 {
        font-size: 18px;
        color: white;
        margin: 40px 0 30px 0;
      }
    }

    // 学校视角
    #schoolbox {
      margin-top: 40px;

      .vicetit {
        line-height: 50px;
        font-size: 16px;
        color: #fff;
        margin: 30px 0;
        border-bottom: 1px solid #7d7d7d;
      }

      ul {
        overflow: hidden;
        width: 100%;
        margin-bottom: 20px;

        li {
          display: inline-block;
          cursor: pointer;
          margin-right: 30px;
          font-size: 16px;
          color: #fff;
          font-weight: 600;

          &:hover {
            color: #4353da;
          }
        }

        .schoolpicked {
          color: #4353da;
        }
      }

      .menu {
        display: flex;
        justify-content: start;
        margin: 40px 0;

        .haveclasssta {
          /deep/ .el-input__inner {
            background-color: transparent;
            color: #fff;
          }
        }

        span {
          line-height: 40px;
          font-size: 14px;
          color: #fff;
          display: inline-block;
          margin-right: 15px;
        }

        .studysta {
          margin-left: 20px;
        }

        .exports {
          font-size: 14px;
          color: #1e29ad;
          cursor: pointer;

          &:hover {
            color: #fff;
          }
        }

        .inp {
          width: 200px;

          /deep/ .el-input__inner {
            color: #fff;
            background-color: transparent;
          }
        }

        .search {
          margin: 0 25px 0 30px;
          background-color: #1e29ad;
          border-color: #1e29ad;

          &:hover {
            background-color: #409eff;
            border-color: #409eff;
          }
        }

        .el-date-editor {
          /deep/ .el-input__prefix {
            display: none;
          }

          /deep/ .el-input__inner {
            background-color: transparent;
            color: #fff;
          }
        }
      }
    }

    // 城市概况
    .citybox {
      h2 {
        font-size: 18px;
        color: white;
        margin: 40px 0 30px 0;
      }
    }

    .cabin {
      padding: 10px 20px;
      background: #000;

      table {
        width: 100%;
        display: table;
        border-collapse: collapse;

        thead {
          border-bottom: 1px solid #313445;

          th {
            color: #fff;
            font-size: 14px;
            font-weight: 500;
            line-height: 60px;

            &:first-child {
              border-right: 1px solid #313445;
            }
          }
        }

        tbody {
          tr {
            td {
              &:first-child {
                border-right: 1px solid #313445;
              }
            }
          }

          td {
            font-size: 13px;
            color: #fff;
            text-align: center;
            line-height: 60px;

            &.detail {
              color: #2a36e0;
              cursor: pointer;

              &:hover {
                color: orangered;
              }
            }

            i {
              display: inline-block;
              width: 8px;
              height: 8px;
              border-radius: 50%;
              margin-right: 6px;
            }

            .t1 {
              background-color: #3c3694;
            }

            .t2 {
              background-color: #ca8c38;
            }

            .t3 {
              background-color: #8a58d1;
            }

            .t4 {
              background-color: #c5506f;
            }
          }
        }
      }
    }
  }
</style>
